<template>
  <div class="px-[16px] py-[16px] mt-[8px] bg-[var(--base-color)] rounded-[8px]">
    <FormTitle title="合同信息" />
    <el-form
      ref="formRef"
      label-position="top"
      label-width="100px"
      :model="formData"
      class="form-components"
      :inline="true"
      :rules="rules"
    >
      <el-form-item label="合同号码">
        <el-input v-model="formData.contract_number" disabled />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="formData.contract_date" type="date" disabled />
      </el-form-item>
      <el-form-item label="签约地点">
        <el-input v-model="formData.signing_place" disabled />
      </el-form-item>
      <el-form-item label="包装及唛头">
        <el-input v-model="formData.package_marking" disabled />
      </el-form-item>
      <el-form-item label="装运期">
        <el-date-picker v-model="formData.ship_period" type="date" disabled />
      </el-form-item>
      <el-form-item label="付款条件">
        <el-input v-model="formData.payment_terms" disabled />
      </el-form-item>
      <el-form-item label="装运标记">
        <el-input v-model="formData.ship_marking" disabled></el-input>
      </el-form-item>
      <el-form-item label="合同价值">
        <el-input v-model="formData.pre_total_amount" disabled>
          <template #append>{{ formData?.pre_currency || "CNY" }}</template>
        </el-input>
        <span></span>
      </el-form-item>
      <div style="width: 100%"></div>
      <el-form-item label="卖方">
        <el-input v-model="formData.seller_name" />
      </el-form-item>
      <el-form-item label="卖方电话">
        <el-input v-model="formData.seller_phone" />
      </el-form-item>
      <el-form-item label="卖方传真">
        <el-input v-model="formData.seller_fax" />
      </el-form-item>
      <el-form-item label="卖方地址">
        <el-input v-model="formData.seller_address" style="minwidth: 300px" />
      </el-form-item>
      <div style="width: 100%"></div>
      <el-form-item label="买方">
        <el-input v-model="formData.buyer_name" />
      </el-form-item>
      <el-form-item label="买方电话">
        <el-input v-model="formData.buyer_phone" />
      </el-form-item>
      <el-form-item label="买方传真">
        <el-input v-model="formData.buyer_fax" />
      </el-form-item>
      <el-form-item label="买方地址">
        <el-input v-model="formData.buyer_address" style="minwidth: 300px" />
      </el-form-item>
    </el-form>
    <vxe-grid v-bind="tableOptions" max-height="300px" />
  </div>
</template>

<script setup>
    import FormTitle from "@/components/Form/FormTitle.vue";
    import { performOperation } from "@/utils/currencyHelper.js";
    const props = defineProps({
        data: { type: Object, default: () => {} },
    });
    const formData = reactive({
        contract_number: null,
        contract_date: null,
        signing_place: null,
        package_marking: null,
        ship_period: null,
        payment_terms: null,
        ship_marking: null,
        pre_total_amount: null,
        pre_currency: null,
        seller_name: null,
        seller_phone: null,
        seller_fax: null,
        seller_address: null,
        buyer_name: null,
        buyer_phone: null,
        buyer_fax: null,
        buyer_address: null,
        total_amount_cny: null,
        pre_exchange_rate: null,
    });
    const rules = reactive({});
    const tableOptions = reactive({
        round: true,
        columnConfig: {
            resizable: true,
        },
        data: [],
        columns: [
            {
                title: "编号",
                type: "seq",
                width: 50,
            },
            {
                title: "货物名称",
                minWidth: 150,
                field: "goods_name",
            },
            {
                title: "规格",
                width: 180,
                field: "specification",
                cellRender: { name: "arrMap" },
            },
            {
                title: "数量",
                width: 180,
                field: "goods_nums",
            },
            {
                title: "单位",
                width: 160,
                field: "goods_unit",
            },
            // {
            //   title: "单价/CNY",
            //   width: 160,
            //   field: "goods_price_cny",
            // },
            // {
            //   title: "金额/CNY",
            //   width: 160,
            //   field: "goods_amount_cny",
            // },
            {
                title: "单价/总价/币制",
                minWidth: 180,
                field: "quarantine_add_code",
                slots: {
                    // default:({row}) =>  `${row.goods_price||'-'}/${row.total_amount||'-'}/${row.currency||'-'}`,
                    default: ({ row }) =>
                        `${row.pre_price}/${row.pre_total_amount}/${row.pre_currency || "-"}`,
                },
            },
        ],
    });

    watch(
        () => props.data,
        (val) => {
            if (val) {
                tableOptions.data = val?.details || [];
                Object.keys(formData).forEach((key) => {
                    formData[key] = val[key];
                });
            }
        },
        {
            deep: true,
        }
    );
    const dataInfo = inject("currencyAndRate");
    watch(
        () => dataInfo.value,
        (val) => {
            const { currency, exchange_rate = 1 } = val;
            if (!currency) return;
            let tableData = JSON.parse(JSON.stringify(tableOptions.data));
            tableData.forEach((item) => {
                const { goods_price, goods_nums } = item;
                item.pre_currency = currency;
                item.pre_price = performOperation(
                    "divide",
                    goods_price,
                    exchange_rate
                ).value;
                item.pre_total_amount = performOperation(
                    "multiply",
                    item.pre_price,
                    goods_nums
                ).value;
            });
            tableOptions.data = tableData;

            formData.pre_exchange_rate = exchange_rate;
            formData.pre_currency = currency
            formData.pre_total_amount = performOperation(
                "divide",
                formData?.total_amount_cny || 1,
                exchange_rate || 1
            ).value;
        },
        {
            deep: true,
        }
    );
</script>

<style lang="scss" scoped></style>
